<template>
    <div
        v-if="isShow(['kanke:textbook:material:list-all', 'kanke:textbook:material:list-document', 'kanke:textbook:material:list-video', 'kanke:textbook:material:list-audio', 'kanke:textbook:material:list-img'])">
        <el-row>
            <el-tabs type="border-card" v-model="activeKey" @tab-click="handleClick">
                <el-tab-pane name="all" label="全部"
                    v-if="hasPermission('kanke:textbook:material:list-all') && showTab.includes('all')">
                    <TabPane v-if="activeKey == 'all'" :type="activeKey" @childEvent="handleChildEvent" />
                </el-tab-pane>
                <el-tab-pane name="doc" label="文档"
                    v-if="hasPermission('kanke:textbook:material:list-document') && showTab.includes('doc')">
                    <TabPane v-if="activeKey == 'doc'" :type="activeKey" @childEvent="handleChildEvent" />
                </el-tab-pane>
                <el-tab-pane name="video" label="视频"
                    v-if="hasPermission('kanke:textbook:material:list-video') && showTab.includes('video')">
                    <TabPane v-if="activeKey == 'video'" :type="activeKey" @childEvent="handleChildEvent" />
                </el-tab-pane>
                <el-tab-pane name="audio" label="音频"
                    v-if="hasPermission('kanke:textbook:material:list-audio') && showTab.includes('audio')">
                    <TabPane v-if="activeKey == 'audio'" :type="activeKey" @childEvent="handleChildEvent" />
                </el-tab-pane>
                <el-tab-pane name="image" label="图片"
                    v-if="hasPermission('kanke:textbook:material:list-img') && showTab.includes('image')">
                    <TabPane v-if="activeKey == 'image'" :type="activeKey" @childEvent="handleChildEvent" />
                </el-tab-pane>
            </el-tabs>
        </el-row>

    </div>
</template>

<script>
import { hasPermission, isShow } from '@/common/permission';
import TabPane from './components/TabPane.vue';
export default {
    // 1=>文档,2=>视频;3=>音频;4=>图片
    name: "KanKeTextbookMaterial",
    components: {
        TabPane
    },
    props: {
        type: {
            type: String,
            default: 'all'
        },
        limitNum: {
            type: Number
        },
        limitType: {
            type: Array,
        },
        showTab: {
            type: Array,
            default: () => { return ['all', 'image', 'doc', 'video', 'audio'] }
        }
    },
    data() {
        return {
            activeKey: this.type,
            // activeKey: 'all',
            multipleVal: [],
            allMultipleVal: [],
            typeMap: {
                1: '文档',
                2: '视频',
                3: '音频',
                4: '图片'
            }
        }
    },
    created() {
        this.init();
    },
    watch: {

    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
        },
        handleChildEvent(value, allSelected) {
            if (this.limitNum && value.length > this.limitNum) {
                this.$message.warning(`最多选择${this.limitNum}个`);
                return
            }
            if (this.limitType && this.limitType.length > 0) {
                let flag = false;
                allSelected.map(item => {
                    if (!this.limitType.includes(item.type)) {
                        flag = true;
                    }
                })

                if (flag) {
                    this.$message.warning(`选择类型不符合要求!`);
                    return
                }
            }
            this.multipleVal = value;
            if (allSelected.length > 0) {
                this.allMultipleVal = [...allSelected];
            }

        },
        handleClick(tab, event) {
            this.activeKey = tab.name;
        }
    }
}
</script>

<style scoped></style>